<template>
  <div style="border-bottom: 2px solid #f2f2f2">
    <div class="header">
      <div class="left">
        <img src="../../img/login_logo@2x.png" alt="" />
        <span>
          <img src="../../img/meiya.jpg" alt="" />
        </span>
      </div>
      <div class="mid">
        <el-menu
          router
          :default-active="$router.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
        >
          <el-menu-item index="/home" style="padding: 0 20px"
            >首页</el-menu-item
          >
          <el-menu-item index="/topic" style="padding: 0 20px"
            >话题</el-menu-item
          >
          <el-menu-item index="/rank" style="padding: 0 20px"
            >排行</el-menu-item
          >
          <el-menu-item index="/follow2" style="padding: 0 20px"
            >关注</el-menu-item
          >
        </el-menu>
      </div>
      <div class="right">
        <span @click="login">登录</span>
        <span @click="register">注册</span>
      </div>
    </div>
  </div>

  <div class="mid-on">
    <div class="on-left">
      <h1>美呀</h1>
      <h4>全世界的美丽都给你</h4>
      <div class="button">
        <el-button type="primary" class="I"
          >IOS端
          <img
            src="../../img/code.jpg"
            alt=""
            style="height: 18px; width: 18px; padding-left: 5px"
          />
        </el-button>
        <el-button type="primary" class="A"
          >安卓端
          <img
            src="../../img/code.jpg"
            alt=""
            style="height: 18px; width: 18px; padding-left: 5px"
          />
        </el-button>
      </div>
    </div>

    <div class="on-right">
      <img src="../../img/home.jpg" alt="" />
    </div>
  </div>

  <div class="mid-in">
    <img
      src="../../img/fo.jpg"
      alt=""
      style="position: absolute; margin: 0 auto; margin-left: 280px"
    />
    <img
      src="../../img/iph.jpg"
      alt=""
      style="position: relative; top: -70px; margin-right: 280px"
    />
  </div>

  <div class="share">
    <div class="sh-t">
      <div class="num">
        <span style="font-size: 60px">10000000</span><span>以上</span>
        <h6>一千万以上的用户口碑分享</h6>
      </div>
      <el-button type="primary" class="more">更多</el-button>
    </div>

    <div class="sh-b">
      <div style="margin-right: 30px;">
        <div>
          <img
            src="../../img/left.jpg"
            alt=""
            style="height: 240px; width: 250px"
          />
        </div>
        <div style="padding: 10px; width: 230px">
          <span style="width: 180px; height: 40px; font-size: 14px"
            >H&M试衣间 | 不到200元穿出千元高级感</span
          >
          <div class="user">
            <span style="display: flex; align-items: center">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="width: 30px; height: 30px;"
              />
              <span>腐败大熊妹</span>
            </span>
            <span style="display: flex; align-items: center">
              <el-icon>
                <Star />
              </el-icon>
              <span>47</span>
            </span>
          </div>
        </div>
      </div>

      <div style="margin-right: 30px;">
        <div>
          <img
            src="../../img/mid.jpg"
            alt=""
            style="height: 240px; width: 250px"
          />
        </div>
        <div style="padding: 10px; width: 230px">
          <span style="width: 180px; height: 40px; font-size: 14px">好用到哭的评价面霜 敏感肌 痘痘肌 良心推荐人手一只</span>
          <div class="user">
            <span style="display: flex; align-items: center">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="width: 30px; height: 30px;"
              />
              <span>一朵花湖花花</span>
            </span>
            <span style="display: flex; align-items: center">
              <el-icon>
                <Star />
              </el-icon>
              <span>67</span>
            </span>
          </div>
        </div>
      </div>

      <div style="margin-right: 30px;">
        <div>
          <img
            src="../../img/right.jpg"
            alt=""
            style="height: 240px; width: 250px"
          />
        </div>
        <div style="padding: 10px; width: 230px">
          <span style="width: 180px; height: 40px; font-size: 14px">男友力穿搭口诀|马丁靴 如何搭配|衬衫如何穿出韩范</span>
          <div class="user">
            <span style="display: flex; align-items: center">
              <el-avatar 
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"  style="width: 30px; height: 30px;"
              />
              <span>欧阳妹妹</span>
            </span>
            <span style="display: flex; align-items: center">
              <el-icon>
                <Star />
              </el-icon>
              <span>742</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="map">
    <img src="../../img/map.jpg" alt="">
  </div>

  <div class="beauty">
    <img src="../../img/beauty.jpg" alt="">
  </div>

  <div class="footer">
    <img src="../../img/footer.jpg" alt="">
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

const router = useRouter();
const login = () => {
  router.push("login");
};
const register = () => {
  router.push("/register");
};
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.left img {
  width: 58px;
  height: 58px;
}
.mid {
  flex: 0.7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-menu-demo {
    border-bottom: 0;
  }
}

.right {
  cursor: pointer;
  span {
    padding: 0 10px;
  }
}

.mid-on {
  height: 588px;
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .on-left {
    // margin: 0 auto;
    padding-left: 70px;
  }
}
.on-left h1 {
  margin-top: 80px;
  margin-bottom: 0;
  font-size: 50px;
  font-weight: normal;
  color: #585858;
}
.on-left h4 {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: normal;
  color: #585858;
}
.button {
  padding-top: 10px;
  margin-top: 150px;
  margin-left: 12px;
  .I {
    padding-left: 35px;
    padding-right: 35px;
    color: #ffffff;
    background-color: #333333;
    height: 50px;
  }
  .A {
    padding-left: 35px;
    padding-right: 35px;
    color: #ffffff;
    background-color: #333333;
    height: 50px;
  }
}
.on-right img {
  height: 584px;
  width: 520px;
}

.mid-in {
  background-color: #ff638a;
  img {
    height: 650px;
    margin: 0 auto;
    display: flex;
  }
}

.share {
  height: 600px;
  width: 70%;
  margin: 0 auto;
}
.sh-t {
  margin-top: 56px;
  margin-bottom: 48px;
  padding-left: 100px;
}
.num span {
  color: #dddddd;
  padding-bottom: 26px;
}
.num h6 {
  font-size: 20px;
  color: #585858;
  margin-bottom: 30px;
}
.more {
  padding: 25px 100px;
  background-color: #ff638a;
  border: 1px solid #ff638a;
  height: 40px;
  width: 40px;
  font-size: 24px;
}
.sh-b {
  width: 30%;
  padding-left: 100px;
  display: flex; 
  align-items: center;
}
.user {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  align-items: center;
}

.map {
  height: 650px;
  background-color: #ff638a;
}
.map img {
  height: 650px;
  margin: 0 auto;
  display: flex;
}

.beauty {
  height: 650px;
}
.beauty img {
  height: 650px;
  margin: 0 auto;
  display: flex;
}

.footer {
  height: 290px;
}
.footer img {
  height: 290px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}
</style>
